<template>
  <div class="reg">
    <el-form
      ref="ruleFormRef"
      :model="registerForm"
      :rules="rules"
      label-width="80px"
      class="login-box"
    >
      <h3 style="color: #106a9b; text-align: center; margin-bottom: 30px">
        欢迎注册,请填写注册信息
      </h3>
      <el-form-item label="账户" prop="username" class="login-title">
        <el-input v-model="registerForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="registerForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="registerForm.name"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-select v-model="value" placeholder="请选择职位" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          style="width: 400px; margin-top: 20px"
          type="primary"
          @click="submitForm(ruleFormRef)"
          >注册</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { getSelList } from "@/request/api";
import type { FormInstance } from "element-plus";
import { RegisterData } from "../type/register";
import { register } from "../request/api";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    //点击注册
    const value = ref("");

    const options = [
      { value: "前端", label: "前端" },
      { value: "后端", label: "后端" },
      { value: "测试", label: "测试" },
      { value: "运维", label: "运维" },
      { value: "PM", label: "PM" },
    ];
    const data = reactive(new RegisterData());
    const registerForm = reactive({
      password: "",
      confirmPassword: "",
      username: "",
      name: "",
      position: "",
    });
    // 验证账户
    var validateUsername = (rule: any, value: any, callback: any) => {
      // 字母数字下划线组成，长度在3-10之间
      let reg = /^(?![^A-Za]+$)(?![^0-9]+$)[0-9A-Za-z_]{3,10}$/;
      if (!value) {
        callback(new Error("请输入账号"));
      } else {
        if (value.length < 3) {
          callback(new Error("账户长度应该不少于3位"));
        } else if (value.length > 10) {
          callback(new Error("账户长度应该不大于10位"));
        } else if (!reg.test(value)) {
          callback(
            new Error(
              "格式错误，包括字母数字下划线,必须加字母、数字"
            )
          );
        } else {
          callback();
        }
      }
    };
    //验证密码
    const validatePass = (rule: any, value: any, callback: any) => {
      if (value === "") {
        callback(new Error("请再一次输入密码"));
      } else if (value !== registerForm.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    // 校验姓名
    const validateName = (rule: any, value: any, callback: any) => {
      //2-4位中文
      let reg = /^[\u4E00-\u9FA5]{2,4}$/;
      if (value && value.length > 0) {
        if (!reg.test(value)) {
          callback([new Error("姓名输入不合法")]);
        } else {
          callback();
        }
      } else if (value.length == 0) {
        callback([new Error("姓名输入不可以为空")]);
      } else {
        callback(new Error("姓名输入不合法"));
      }
    };
    const rules = {
      username: [
        {
          required: true,
          // message: "请输入账号",
          trigger: "blur",
          validator: validateUsername,
        },
        {
          min: 3,
          max: 10,
          // message: "账号的长度在3-10之间",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
          // validator: validatePass,
        },
        {
          min: 6,
          max: 16,
          message:
            "密码长度不少于6位,必须至少包含一个大小写字母、数字、特殊符号",
          trigger: "blur",

          pattern:
            "^(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%*--+/\\\\.])[\\da-zA-Z!@#$%*--+/\\\\.]{6,16}$",
        },
      ],
      confirmpassword: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 6,
          message: "密码不一致，请重新输入",
          trigger: "blur",
          validator: validatePass,
          pattern:
            "^(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%*--+/\\\\.])[\\da-zA-Z!@#$%*--+/\\\\.]{6,}$",
        },
      ],
      name: [
        {
          validator: validateName,
          // message:"名字为中文"
        },
      ],
    };
    const ruleFormRef = ref<FormInstance>();
    const router = useRouter(); //相当于$router
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      //对表单的内容进行验证
      //v e验证成功，反之失败
      formEl.validate((valid) => {
        if (valid) {
          const getReg = {
            username: registerForm.username,
            password: registerForm.password,
            confirmPassword: registerForm.confirmPassword,
            name: registerForm.name,
            position: registerForm.position,
          };
          // console.log('submit!')
          register(getReg).then((res) => {
            console.log(res);
            //将token进行保存
            localStorage.setItem("token", res.data.token);
            //跳转登录页
            router.push("/login");
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };
    return {
      ...toRefs(data),
      rules,
      ruleFormRef,
      submitForm,
      registerForm,
      getSelList,
      options,
      value,
    };
  },
});
</script>

<style scoped>
.reg {
  width: 100%;
  height: 100%;
  background-image: url("../assets/login1.jpg");
  overflow: hidden;
  /* min-height:100vh; */
  background-size: cover;
}
.login-box {
  width: 400px;
  margin: 100px auto;
  border: 1px solid #dcdfe6;
  padding: 48px;
  border-radius: 10px;
  box-shadow: 0 0 30px #dcdfe6;
  background-color: white;
  opacity: 0.9;
}
.login-title {
  text-align: center;
}
.el-select {
  width: 400px;
}
</style>
